<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
</head>
<body>
<div id="cesiumContainer">
</div>
<div id="toolbar"></div>
<script>
    // Doorknobs, doors, roofs, and walls are styled with the batch table hierarchy.
    // Since buildings and zones are not backed by geometry they are not styled directly. However
    // styles may be written that take building and zone properties into account.
    //
    // Hierarchy layout (doorknobs are children of doors):
    //
    //   zone0
    //     building0
    //       roof0
    //       wall0
    //       door0 - doorknob0
    //       door1 - doorknob1
    //       door2 - doorknob2
    //       door3 - doorknob3
    //     building1
    //       roof1
    //       wall1
    //       door4 - doorknob4
    //       door5 - doorknob5
    //       door6 - doorknob6
    //       door7 - doorknob7
    //     building2
    //       roof2
    //       wall2
    //       door8 - doorknob8
    //       door9 - doorknob9
    //       door10 - doorknob10
    //       door11 - doorknob11
    //
    // Class properties:
    //
    //   zone:
    //     * zone_building
    //     * zone_name
    //   building:
    //     * building_area
    //     * building_name
    //   wall:
    //     * wall_paint
    //     * wall_windows
    //     * wall_name
    //   roof:
    //     * roof_paint
    //     * roof_name
    //   door:
    //     * door_mass
    //     * door_width
    //     * door_name
    //   doorknob:
    //     * doorknob_size
    //     * doorknob_name

    var initCesium = new InitCesium();
    var viewer = initCesium.initViewer('cesiumContainer');
    viewer.clock.currentTime = new Cesium.JulianDate(2457522.154792);

    var tileset = new Cesium.Cesium3DTileset({
        url: '../data/Cesium3DTiles/Hierarchy/BatchTableHierarchy/tileset.json'
    });

    viewer.scene.primitives.add(tileset);
    viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -0.3, 0.0));

    var styles = [];
    function addStyle(name, style) {
        styles.push({
            name : name,
            style : style
        });
    }

    addStyle('No style', {});

    addStyle('Color by building', {
        'color' : {
            'conditions' : [
                ["${building_name} === 'building0'", "color('purple')"],
                ["${building_name} === 'building1'", "color('red')"],
                ["${building_name} === 'building2'", "color('orange')"],
                ['true', "color('blue')"]
            ]
        }
    });

    addStyle('Color all doors', {
        'color' : {
            'conditions' : [
                ["isExactClass('door')", "color('orange')"],
                ['true', "color('white')"]
            ]
        }
    });

    addStyle('Color all features derived from door', {
        'color' : {
            'conditions' : [
                ["isClass('door')", "color('orange')"],
                ['true', "color('white')"]
            ]
        }
    });

    addStyle('Color features by class name', {
        'defines' : {
            'suffix' : "regExp('door(.*)').exec(getExactClassName())"
        },
        'color' : {
            'conditions' : [
                ["${suffix} === 'knob'", "color('yellow')"],
                ["${suffix} === ''", "color('lime')"],
                ['${suffix} === null', "color('gray')"],
                ['true', "color('blue')"]
            ]
        }
    });

    addStyle('Style by height', {
        'color' : {
            'conditions' : [
                ['${height} >= 10', "color('purple')"],
                ['${height} >= 6', "color('red')"],
                ['${height} >= 5', "color('orange')"],
                ['true', "color('blue')"]
            ]
        }
    });

    function setStyle(style) {
        return function() {
            tileset.style = new Cesium.Cesium3DTileStyle(style);
        };
    }

    var styleOptions = [];
    for (var i = 0; i < styles.length; ++i) {
        var style = styles[i];
        styleOptions.push({
            text : style.name,
            onselect : setStyle(style.style)
        });
    }

    Sandcastle.addToolbarMenu(styleOptions);

    var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

    // When a feature is left clicked, print its class name and properties
    handler.setInputAction(function(movement) {
        var feature = viewer.scene.pick(movement.position);
        if (!Cesium.defined(feature)) {
            return;
        }
        console.log('Class: ' + feature.getExactClassName());
        console.log('Properties:');
        var propertyNames = feature.getPropertyNames();
        var length = propertyNames.length;
        for (var i = 0; i < length; ++i) {
            var name = propertyNames[i];
            var value = feature.getProperty(name);
            console.log('  ' + name + ': ' + value);
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    // When a feature is middle clicked, hide it
    handler.setInputAction(function(movement) {
        var feature = viewer.scene.pick(movement.position);
        if (!Cesium.defined(feature)) {
            return;
        }
        feature.show = false;
    }, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);

</script>
</body>

</html>